import 'package:flutter/material.dart';

//void main() => runApp(new ListViewVertical());

//void main() => runApp(new ListViewHorizontal());

//void main() =>
//    runApp(new ListViewBuilder(
//      // 使用 generate 方法产生 500 条数据
//      items: new List<String>.generate(500, (i) => "Item $i"),
//    ));

void main() => runApp(new GridViewDemo());

class ListViewVertical extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = " 垂直列表示例 ";
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        // 添加基础列表
        body: ListView(
          // 添加静态数据
          children: <Widget>[
            // ListTile 是一种样式相对固定的列表项，比如微信的"发现"页面
            ListTile(
              // 添加图标
              leading: Icon(Icons.alarm),
              // 添加文本
              title: Text('Alarm'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
            ListTile(
              leading: Icon(Icons.print),
              title: Text('Print'),
            ),
            ListTile(
              leading: Icon(Icons.title),
              title: Text('Title'),
            ),
            ListTile(
              leading: Icon(Icons.accessibility_new),
              title: Text('Accessibility'),
            ),
            ListTile(
              leading: Icon(Icons.volume_up),
              title: Text('Volume'),
            ),
            ListTile(
              leading: Icon(Icons.access_time),
              title: Text('Time'),
            ),
            ListTile(
              leading: Icon(Icons.zoom_out_map),
              title: Text('Zoom'),
            ),
            ListTile(
              leading: Icon(Icons.accessible),
              title: Text('Accessible'),
            ),
            ListTile(
              leading: Icon(Icons.headset),
              title: Text('Headset'),
            ),
            ListTile(
              leading: Icon(Icons.call_end),
              title: Text('Call'),
            ),
          ],
        ),
      ),
    );
  }
}

class ListViewHorizontal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = " 水平列表示例 ";
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        // 添加容器
        body: Container(
          // 顶部外边距为20
          margin: EdgeInsets.symmetric(vertical: 20.0),
          // 设定容器高度
          height: 200.0,
          child: ListView(
            // 设定水平方向排列
            scrollDirection: Axis.horizontal,
            // 添加子元素
            children: <Widget>[
              // 每个 Container 即为一个列表项
              Container(
                width: 160.0,
                color: Colors.lightBlue,
              ),
              Container(
                width: 160.0,
                color: Colors.amber,
              ),
              // 此容器里 "水平" 及 "列表" 文字为垂直布局
              Container(
                width: 160.0,
                color: Colors.green,
                // 垂直布局
                child: Column(
                  children: <Widget>[
                    Text(
                      '水平',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 36.0,
                      ),
                    ),
                    Text(
                      '列表',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 36.0,
                      ),
                    ),
                    Icon(Icons.list),
                  ],
                ),
              ),
              Container(
                width: 160.0,
                color: Colors.deepPurpleAccent,
              ),
              Container(
                width: 160.0,
                color: Colors.black,
              ),
              Container(
                width: 160.0,
                color: Colors.pinkAccent,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ListViewBuilder extends StatelessWidget {

  // 列表数据集
  final List<String> items;

  // 构造方法用于接收列表数据集
  ListViewBuilder({Key key, @required this.items}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = "长列表示例";
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        // 使用 ListView.builder 来构造列表项
        body: ListView.builder(
          // 列表长度
          itemCount: items.length,
          // 列表项构造器：context 为上下文，index 表示列表项索引
          itemBuilder: (context, index) {
            // 返回列表项
            return ListTile(
              // 左侧图标
              leading: Icon(Icons.phone),
              // 文本内容
              title: Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "网格列表示例";

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        // 使用 GridView.count 构建网格
        body: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20.0),
          crossAxisSpacing: 30.0,
          // 一行上放三列数据
          crossAxisCount: 3,
          // 数据项：五行三列
          children: <Widget>[
            const Text('第一行第一列'),
            const Text('第一行第二列'),
            const Text('第一行第三列'),
            const Text('第二行第一列'),
            const Text('第二行第二列'),
            const Text('第二行第三列'),
            const Text('第三行第一列'),
            const Text('第三行第二列'),
            const Text('第三行第三列'),
            const Text('第四行第一列'),
            const Text('第四行第二列'),
            const Text('第四行第三列'),
            const Text('第五行第一列'),
            const Text('第五行第二列'),
            const Text('第五行第三列'),
          ],
        ),
      ),
    );
  }
}

